<template>
	<view class="home">
		<!-- banner轮播 -->
		<swiper class="swiper">
			<swiper-item v-for="item in list" :key="item.id">
				<image :src="item.pic" mode=""></image>
			</swiper-item>
			
		</swiper>
			<image @click="goCart" class="cartIcon" src="../../static/icons/cart.png" mode=""></image>
			<image class="searchIcon" src="../../static/icons/search.png" mode=""></image>
		<!-- 分类导航 -->
		<view class="cate">
			<view class="cate-item" v-for="item in list_cate" :key="item.id"  @click="goCategory(item.id)">
				<image :src="item.icon" mode=""></image>
				<view>{{item.name}}</view>
			</view>
		</view>

		<!-- 小喇叭限时活动 -->
		<view class="notify">
			<view class="notifyPic">
				<image src="@/static/icons/notify.png" mode=""></image>
			</view>

			<view class="notifyText">
				限时活动:
			</view>

			<swiper class="notifySwiper" vertical="true" :autoplay="true" circular="true" :interval="2000" :duration="500">
				<swiper-item v-for="item in list_nof" :key="item.recommendId"  @click="goCommodity(item.productId)">
					<view class="notifyName">
						{{item.name}}
					</view>
					<view class="notifyPri">
						<view class="notifyOldPri">
							{{item.price}}
						</view>
						<view class="notifyNewPri">
							现价:{{item.promotionPrice}}
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>



		<!-- 热门推荐 -->
		<view class="hotCom">
			<view class="hotComTitle">
				热门推荐
			</view>
			<swiper class="hotSwiper" circular="true" display-multiple-items="3" :autoplay="true" :interval="3000" :duration="2500">
				<swiper-item v-for="item in list_hot" :key="item.id" @click="goCommodity(item.id)">
					<image :src="item.pic" mode=""></image>
					<view class="hotComName">
						{{item.name}}
					</view>
				</swiper-item>

			</swiper>
		</view>



		<!-- 新品推荐 -->
		<view class="new">
			<view class="newComTitle">
				新品推荐
			</view>
			<scroll-view class="newSlide" scroll-x="true" show-scrollbar="true">
				<view class="newCom">
					<view class="newComCard" @click="goCommodity(item.id)" v-for="item in list_new" :key="item.id">
						<view class="newComPic">
							<image :src="item.pic" mode=""></image>
						</view>
						<view class="newComInfo">
							<view class="newInfoTop">
								{{item.name}}
							</view>
							<view class="newInfoBottom">
								价格:{{item.price}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		
		<!-- 猜你喜欢 -->
		<view class="like">
			<view class="likeTitle">
				猜你喜欢
			</view>
			<view class="likeArr">
				<view class="likeCard" v-for="item in list_like" :key="item.id" @click="goCommodity(item.id)">
					<view class="likePic">
						<image :src="item.pic" mode=""></image>
					</view>
					<view class="likeText">
						<view class="likeName">
							{{item.brandName}}
						</view>
						<view class="likePri">
							¥{{item.price}}
							<text>乐居</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		
		
		
		
		
		
	</view>
</template>

<script>
	import {
		bannerAds,
		categorys,
		recommendList,
		hotList,
		lejuLatestProducts,
		saleMostProducts
	} from "../../api/home/index.js"
	export default {
		data() {
			return {
				list: [],
				list_cate: [],
				list_nof: [],
				list_hot: [],
				list_new: [],
				list_like:[],
			};
		},
		onLoad() {
			bannerAds().then(res => {
					// console.log(res)
					this.list = res.data.items
				}),
				categorys().then(res => {
					// console.log(res)
					this.list_cate = res.data.category.children
				})
			recommendList().then(res => {
				console.log(res)
				this.list_nof = res.data.items
				console.log(this.list_nof)
			})
			hotList().then(res => {
				// console.log(res)
				this.list_hot = res.data.items
			})
			lejuLatestProducts().then(res => {
				// console.log(res)
				this.list_new = res.data.productList
			})
			saleMostProducts().then(res=>{
				console.log(res)
				this.list_like=res.data.items
			})
		},
		methods:{
			goCategory(val) {
				uni.navigateTo({
					url: `../kind/category/category?id=${val}`
				})
			},
			goCommodity(val){
				uni.navigateTo({
					url:`./commodity/commodity?id=${val}`
				})
			},
			goCart(){
				uni.navigateTo({
					url:"../../pages/user/cart/cart"
				})
			}
		}
	}
</script>

<style lang="scss">
	.notify swiper-item {
		display: flex;
	}
	page {
		background-color: #F1ECE7;
	}
</style>
<style lang="scss" scoped>
	

	.home {
		.cartIcon{
			position: absolute;
			top: 15px;
			right: 15px;
			width: 21px;
			height: 21px;
		}
		.searchIcon{
			position: absolute;
			top: 15px;
			right: 60px;
			width: 21px;
			height: 21px;
		}
		// banner轮播
		.swiper {
			position: relative;
			height: 181px;
			overflow: hidden;

			image {
				width: 100%;
				height: 282px;
			}
			
		}

		// 分类导航
		.cate {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 30px 0;

			.cate-item {
				text-align: center;

				image {
					width: 40px;
					height: 40px;
				}

				text {
					text-align: center;
				}
			}
		}

		// 限时活动
		.notify {
			width: 335px;
			height: 48px;
			margin: 20px auto;
			background-color: #fff;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.notifyPic {
				margin-left: 15px;

				image {
					width: 24px;
					height: 24px;
				}
			}

			.notifyText {
				width: 67px;
				height: 48px;
				text-align: center;
				line-height: 48px;
				font-size: 14px;
				font-weight: 600;
				color: orange;

			}

			.notifySwiper {
				display: flex;
				width: 229px;
				height: 48px;

				.notifyName {
					width: 125px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					line-height: 48px;
					font-size: 14px;
				}

				.notifyPri {
					width: 87px;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.notifyOldPri {
						font-size: 12px;
						font-weight: 600;
						color: rgb(51, 51, 51);
						text-decoration: line-through;
					}

					.notifyNewPri {
						font-size: 12px;
						font-weight: 600;
						color: red;
					}
				}
			}
		}

		//热门推荐
		.hotCom {
			padding: 0 15px;

			.hotComTitle {
				font-size: 16px;
				color: #3e3e3e;
				font-weight: 600;
				padding: 15px 0;
			}

			.hotSwiper {
				width: 345px;
				height: 150px;
				margin: 0 auto;

				swiper-item {
					width: 115px;
					height: 150px;
					margin: 0 10px;
				}

				image {
					width: 104px;
					height: 88px;
				}

				.hotComName {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-size: 13px;
					line-height: 19px;
					color: #3e3e3e;
					text-align: center;
					margin-top: 10px;
					font-weight: 600;
				}
			}
		}

		//新品推荐
		.new {
			padding: 0 15px;
			.newComTitle {
				font-size: 16px;
				color: #3e3e3e;
				font-weight: 600;
				padding: 15px 0;

			}

			.newCom {
				padding: 0 15px;
				display: flex;

				.newComCard {
					display: flex;
					justify-content: center;
					flex-shrink: 0;
					width: 295px;
					height: 130px;
					background-color: #fff;
					margin-right: 10px;
					border-radius: 10px;

					.newComPic {
						display: flex;
						align-items: center;
						padding-left: 15px;

						image {
							width: 97px;
							height: 84px;
						}
					}

					.newComInfo {
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						padding-left: 15px;
						font-size: 13px;
						color: #3e3e3e;
						letter-spacing: 0.5px;

						.newInfoTop {
							height: 36px;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							/* 行数 */
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
						}

					}
				}
			}
		}
	
		//猜你喜欢
		.like{
			padding: 0 15px;
		
			.likeTitle{
				font-size: 16px;
				color: #3e3e3e;
				font-weight: 600;
				padding: 15px 0;
			}
			.likeArr{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.likeCard{
					width: 162px;
					height: 209px;
					margin: 10px 0;
					background-color: #fff;
					.likePic{
						image{
							width: 162px;
							height: 119px;
						}
					}
					.likeText{
						padding: 18px;
						// display: flex;
						// flex-direction: column;
						// justify-content: space-around;
						.likeName{
							color: #3e3e3e;
							line-height: 19px;
							margin-top: 4px;
							font-weight: 700;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							font-size: 13px;
						}
						.likePri{
							    font-size: 13px;
								margin-top: 10px;
								display: flex;
								justify-content: space-between;
						}
					}
				}
			}
		}
	}
</style>
